/**
 * Created by 顾杰 on 2017/5/9.
 */
import React from 'react';
import { getEchartsFontSize } from '../../utils/httputil';
import ReactEcharts from 'echarts-for-react';
import styles from './index.less';

const empty = require('is-empty');
class WitEchartsItem extends React.Component {

  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const { type, data } = this.props;
    if (empty(data)) {
      return false;
    }
    let option = {};
    switch (type) {
      case 'line':
        option = {
          color: ['#FF8000'],
          grid: {
            containLabel: true,
            left: '2%',
            right: '3%',
            bottom: '15%',
            top: '15%'
          },
          xAxis: {
            axisLine: { show: true },
            axisTick: { show: false },
            data: data.month,
            axisLabel: {
              interval: 0,
              rotate: -30
            }
          },
          yAxis: {
            nameTextStyle: {
              fontSize: getEchartsFontSize()
            },
            splitLine: {
              show: true
            },
            axisLine: { show: true },
            axisTick: { show: false },
            axisLabel: { textStyle: { fontSize: getEchartsFontSize() } }

          },
          series: [
            {
              type: 'line',
              data: data.lineSource,
              showSymbol: true,
              symbol: 'circle',
              symbolSize: 15,
              label: {
                normal: { show: true, textStyle: { fontSize: getEchartsFontSize() } }
              }
            }
          ]
        };
        break;
      case 'pie':
        option = {
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            left: 'right',
            top: 'center',
            data: ['市外转接(个人)', '市内转接(个人)', '市外转接(整建制)', '市内转接(整建制)']
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: [
                { value: 335, name: '市外转接(个人)' },
                { value: 310, name: '市内转接(个人)' },
                { value: 234, name: '市外转接(整建制)' },
                { value: 135, name: '市内转接(整建制)' },
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        break;
      case 'bar':
        option = {
          color: ['#3398DB'],
          tooltip: {
            trigger: 'item',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '12%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: data.xAxis,
              axisTick: {
                alignWithLabel: true
              },
              axisLabel: {
                interval: 0,
                rotate: -20,
                align: 'right',
              }
            }
          ],
          yAxis: {
            axisLabel: { textStyle: { fontSize: getEchartsFontSize() } },
            type: 'value'
          },
          series: [
            {
              type: 'bar',
              data: data.barSource,
              tooltip: { textStyle: { fontSize: getEchartsFontSize() } },
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  fontSize: 20
                }
              }
            }
          ]
        };
        break;
    }
    return (
      <div>
        <ReactEcharts option={option} />
      </div>
    );
  }
}

export default WitEchartsItem;
